<template>
  <div>
    <!-- 下面是适配IPHONEX标签  暂时不做 -->
    <!-- <van-nav-bar safe-area-inset-top /> -->
    <div class="box">
      <div class="mask"></div>
      <img :src="'http://video.zjsxjy.com/' + videoList.banner" alt="" />
      <img class="icon_play" src="@/assets/images/big-play-icon.png" alt="" />
    </div>
    <van-cell :title="videoList.title" :label="videoList.desc" />

    <van-cell
      :title="videoList.free ? videoList.free + '元' : '免费'"
      :value="'已有' + videoList.study_count + '人在学习'"
    />
    <!--    题库  courseId!=0时渲染按题库  -->
    <van-cell
      v-if="courseId"
      is-link
      class="tiku_flex"
      @click="
        $router.push({
          path: '/addhomework',
          query: {
            id: courseId,
          },
        })
      "
    >
      <template slot="title">
        <img
          class="tiku_icon_video"
          src="../../assets/images/course-data-icon.png"
          alt=""
        />
        <span class="box">
          <span>增加题库</span>
        </span>
      </template>
    </van-cell>
    <!-- 目录详情 -->
    <van-tabs v-model="active" title-active-color="#0486fe" class="tabs_margin">
      <van-tab title="详情">
        <div v-html="videoList.content"></div>
        <div class="recommnt">
        <van-cell :title="'评论(0' + ')'"> </van-cell>
        
       <!--  <div class="empty">
           <img class="empty-comment" src="@/assets/images/empty-comment.png" alt="">
        </div> -->
        </div>
      </van-tab>
      <van-tab title="目录">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item :title="titlemulu" name="1">
            <van-cell-group v-for="(item, index) in video_mulu" :key="index">
              <van-cell :title="item.title" :label="item.lenght">
                <template slot="icon">
                  <img
                    class="mulu_icon"
                    src="../../assets/images/audio-play.png"
                    alt=""
                  />
                </template>
              </van-cell>
            </van-cell-group>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
    </van-tabs>
    <!-- 购买  分享 -->
    <van-goods-action>
      <van-goods-action-icon text="首页" @click="$router.push('/shouye')">
        <template slot="icon">
          <img
            class="share_icon"
            src="../../assets/images/backhome-icon.png"
            alt=""
          />
        </template>
      </van-goods-action-icon>
      <van-goods-action-icon text="分享">
        <template slot="icon">
          <img
            class="share_icon"
            src="../../assets/images/share-icon.png"
            alt=""
          />
        </template>
      </van-goods-action-icon>
      <van-goods-action-button color="#67c23a" type="warning" text="购买VIP" />
      <van-goods-action-button color="#0486fe" type="danger" text="免费购买" />
    </van-goods-action>
    <!-- 下面是留空间  用户好操作 -->
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>

<script>
import { getVideoPages, getVideoList } from '@/api'
export default {
  data() {
    return {
      active: 0,
      activeName: 0,
      //发送页面请求
      queryData: {
        cid: this.$route.query.cid,
        uid: '',
      },
      querylist: {
        cid: this.$route.query.cid,
        uid: '',
      },
      // 整个页面i按数据
      videoList: '',
      // 目录数据
      video_mulu: '',
      titlemulu: '',
      //路由跳转ID
      courseId: '',
      comment:null,
    }
  },
  created() {
    this.getvideopages(), this.getVideoList()
  },
  mounted() {},
  methods: {
    //获取页面数据
    async getvideopages() {
      // console.log(this.queryData)
      try {
        const { data: res } = await getVideoPages(this.queryData)
        console.log(res, 'video')
        this.videoList = res.data.course_detail
        this.courseId = res.data.link_bank.category_id
        console.log(this.courseId)
        // console.log(this.videoList)
      } catch (err) {
        console.log(err)
      }
    },
    //获取目录数据
    async getVideoList() {
      try {
        const { data: res } = await getVideoList(this.querylist)
        console.log(res.data.video[0].video_list, '目录')
        this.video_mulu = res.data.video[0].video_list
        this.titlemulu = res.data.video[0].cate_name
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
body {
  background-color: #f6f6f6;
}
.box {
  position: sticky;
  z-index: 999999;
  top: 0%;
  margin-bottom: 8px;
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.3;
  }
}
.box img {
  width: 375px;
  height: 210px;
  &.icon_play {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-80%);
  }
}

.tiku_icon_video {
  width: 24px;
  height: 24px;
  vertical-align: center;
  margin-top: 6px;
}
.tiku_flex {
  margin-top: 3px;
  line-height: 31px;
  p {
    margin-top: -20px;
    vertical-align: center;
  }
}
.share_icon {
  width: 19px;
}
.mulu_icon {
  width: 16px;
  height: 16px;
  margin-top: 15px;
  margin-right: 15px;
}
.tabs_margin {
  margin-bottom: 100px;
}
.recommnt {
  margin-top: 20px;
}
.empty-comment{
  width: 70px;
  margin-top: 20px;
  margin-left: 150px;
}
</style>
